<!-- 企业待遇 -->
<template>
  <div class="box" >
      <div class="search">
         <div class="search-content">
              <div class="search-left">
                  <el-input
                  placeholder="请输入搜索内容"
                  v-model="keyWord"
                  autocomplete
                  maxlength="20"
                  show-word-limit
                  />
              </div>
              <div class="search-right">
                  <button @click="searchKeyWord()">查询</button>
              </div>
         </div>
      </div>
      <div class="top">
          <div class="top-content">
              <div>
                  <button  @click="showInput = true">增加企业</button>
                  <button @click="delIsChecked()">批量删除</button>    
              </div>
            
          </div>
      </div>
      <div class="content" ref="wrap">
        <el-table
          ref="multipleTable"
          :data="treatmenttypes"
          border
          fit="false"
          stripe
          show-header
          highlight-current-row
          height="100%"
          :row-style="{height: '50px'}"
          @selection-change="handleSelectionChange"
          v-loading="isLoad"
        >
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="图标"  align="center" width="60" fixed>
              <template #default="scope">
                <div style="display: flex; align-items: center">
                    <i :class="'iconfont '+scope.row.treatmentTypeIcon" style="font-size: 22px;width: 60px;text-align: center;"></i>
                </div> 
              </template>
          </el-table-column>
          <el-table-column property="treatmentTypeName" label="待遇类型" show-overflow-tooltip width="100"/>
          <el-table-column property="treatmentRefer" label="待遇描述" show-overflow-tooltip width="700"/>
          <el-table-column align="center" width="140" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index)">修改</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 修改页面 -->
      <el-dialog v-model="showInput" width="30%" :close-on-click-modal="false" destroy-on-close :model="treat" @close="closeChange">
        <el-form-item label="待遇icon" >
            <el-input v-model="treat.treatmentTypeIcon" autocomplete="off" style="width: 100%" clearable ></el-input>
        </el-form-item>
        <el-form-item label="待遇类型" >
            <el-input v-model="treat.treatmentTypeName" autocomplete="off" style="width: 100%" clearable ></el-input>
        </el-form-item>
        <el-form-item label="待遇类型" >
            <el-input v-model="treat.treatmentRefer" autocomplete="off" style="width: 100%" clearable ></el-input>
        </el-form-item>
        <div style="width: 100%;text-align: center;">
          <el-button @click="closeChange">取 消</el-button>
          <el-button type="primary" @click="addChange">确 定</el-button>
        </div>
      </el-dialog>

      <div class="bottom">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              @current-change="changePage"
              @prev-click="changePage"
              @next-click="changePage"
              :total="pageTotals"
          >
          </el-pagination>
      </div>
  </div>
</template>

<script>

import {getAllTreatment,getAllPage,deleTreat,changeTreat} from '../../api/secondary_api/treatment'
import {ElMessage } from 'element-plus'

export default{
  name:'PageStoreManage',
   data() {
      return{
        isLoad:true,//加载页面
        pageNum:1,//页码
        pageSize:0,//页面总条数
        pageTotals:0,//总页数
        keyWord:"",//模糊查询的条件
        treatmenttypes:[],//查询的企业
        multipleSelection: [],//被选中的行
        showInput:false,//显示修改页面
        treat:{
            treatmentTypeId:0,//待遇id
            treatmentTypeName:'',//待遇类型
            treatmentTypeIcon:'',//待遇icon
            treatmentRefer:'',//待遇描述
        },
      }
    },
    methods: {
        handleEdit(index){//修改
            this.showInput = true;
            this.treat.treatmentTypeId=this.treatmenttypes[index].treatmentTypeId;
            this.treat.treatmentTypeName=this.treatmenttypes[index].treatmentTypeName
            this.treat.treatmentTypeIcon=this.treatmenttypes[index].treatmentTypeIcon
            this.treat.treatmentRefer=this.treatmenttypes[index].treatmentRefer
        },
        closeChange(){//关闭
            this.showInput = false
            this.treat.treatmentTypeId=0
            this.treat.treatmentTypeName=""
            this.treat.treatmentTypeIcon=""
            this.treat.treatmentRefer=""
        },
        addChange(){//确认
            changeTreat(this.treat).then(
                response => {
                    if(response.code == 200){
                        ElMessage.success({message: '成功'})
                        this.changePage(this.pageNum)
                    }else if(response.code == 500){
                        ElMessage.error({message: '失败标签已存在'})
                    }
                }
            )
            this.closeChange()
        },
        handleDelete(row){//删除
            this.deleFinanc(row.treatmentTypeId)
        },
        delIsChecked(){//批量删除
            if(this.multipleSelection.length > 0){
                this.multipleSelection.forEach((item)=>{
                    this.deleFinanc(item.treatmentTypeId)
                 })
            }else{
                ElMessage.error('请勾选内容')
            }
        },
        deleFinanc(id){//根据id删除
            deleTreat(id).then(
                response=>{
                    if(response.code==200){
                        if(this.treatmenttypes.length == 1){
                            this.changePage(this.pageNum-1)
                        }else{
                            this.changePage(this.pageNum)
                        }
                        ElMessage.success({
                            message: '删除成功'
                        })
                    }else{
                        ElMessage.error(response.message)
                    }
                }
            )
        },
        handleSelectionChange(val) {//全选
            this.multipleSelection = val;
        },
        changePage(e){//搜索分页切换
            if(e<1){
                e=1
            }
            this.isLoad = true
            this.pageNum = e;
            this.searchKeyWord();
        },
        searchKeyWord(){//模糊查询
            this.searchAll(this.pageNum,this.pageSize,this.keyWord)
        } ,
        searchAll(pageNum,pageSize,keyWord){//查询企业
            getAllPage(keyWord).then(
                response=>{
                    if(response.code == 200){
                        this.pageTotals = response.data.length
                        getAllTreatment(pageNum,pageSize,keyWord).then(
                            response=>{
                                if(response.code == 200){
                                    setTimeout(() => {
                                        this.treatmenttypes = response.data
                                        this.isLoad = false
                                    }, 500);
                                }else{
                                    this.treatmenttypes =[]
                                    ElMessage.error(response.msg);
                                }
                            }
                        )
                    }else{
                        this.treatmenttypes = []
                        this.pageTotals = 0
                        ElMessage.error(response.msg);
                    }
                }
            )
        }
    } ,  
    created(){
        
    },
    mounted(){
        this.$nextTick(()=>{//计算每页显示多少条
            let $ele = this.$refs.wrap
            let height = $ele.offsetHeight
            this.pageSize = parseInt(height/50);
            this.searchAll(this.pageNum,parseInt(height/50),this.keyWord)
        })
    },
  }
</script>

<style scoped>
  .box{
      width: 100%;
      /* height: calc(100vh - 151px); */
      font-style: 40px;
      overflow: hidden;
  }
  .top{
      width: 100%;
      padding: 0 2%;
      overflow: hidden;
  }
  .top-content{
      width: 96%;
      height: 35px;
      margin-top: 10px;
      overflow: hidden;
  }
   .top-content>div>button{
       width: 130px;
       height: 35px;
       line-height: 35px;
       color: #000;
       border-radius: 5px;
      border: 1px solid #fff;
   }
   button:hover{
       opacity: 0.5;
   }
    .top-content>div>button:nth-of-type(1){
        background-color: #00ffff;
   }
   .top-content>div>button:nth-of-type(2){
         background-color: red;
   }
   .search{
       width: 100%;
       padding: 0 2%;
       overflow: hidden;
   }
   .search-content{
       width: 96%;
       overflow: hidden;
       margin-top: 10px;
   }
   .search-left{
       width: 25%;
       float: left;
   }
  .search-right{
       width: 10%;
       float: left;
   }
   .search-left>.el-input{
       width: 100%;
   }
   .search-right>button{
       width: 100%;
       height: 32px;
       overflow: hidden;
       background-color: #00ffff;
       float: right;
      border: 1px solid #fff;
      border-radius: 5px;
   }
  .content{
      height: calc(100vh - 265px);
      margin-top: 5px;
      padding: 0 2%;
      position: relative;
      display: flex;
  }
 

  .delBtn{
      background-color: rgba(245, 6, 6, 0.973);
      color: #fff;
  }
   .editBtn{
      background-color: #0079f3;
      color: #fff;
  }
  .delBtn,.editBtn{
      width: 65px;
      height: 30px;
      line-height: 30px;
      border: 0px;
      border-radius: 5px;
      margin-left: 10px;
      border: 1px solid #fff;
  }
  .dialog-footer{
      margin-left:42%;
  }
  .addButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 0;
  }
  .delButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 30px;
  }
  .el-input{
      width: 50%; 
  }
  .el-input__count{
      height: 10%;
  }
  .bottom{
      margin: 20px 2%;
  }
  
</style> 